<!--
 * @Description:
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-23 11:49:20
 * @LastEditors: yel
 * @LastEditTime: 2022-08-29 11:34:09
-->
<template>
    <div class="container full-screen">
        <!-- 1左侧 -->
        <div class="left flexcbh position-re pro-bgcolor544 p-20">
            <pro-title label="重点人员流调信息"></pro-title>

            <!-- v-loading="loading2" -->
            <div
                class="left-content fx1 flexcsh"
                element-loading-background="rgba(0, 0, 0, 0.3)"
                v-if="currentdDetail"
            >
                <div class="dialog_content1 flexcsc">
                    <div class="item top m-b20">
                        <div class="flex m-b10">
                            <div class="label">姓名：</div>
                            <div class="label">{{ currentdDetail.name }}</div>
                        </div>
                        <div class="flex m-b10">
                            <div class="label">性别：</div>
                            <div class="label">{{ currentdDetail.sex }}</div>
                        </div>
                        <div class="flex m-b10">
                            <div class="label">年龄：</div>
                            <div class="label">{{ currentdDetail.age }}</div>
                        </div>

                        <div class="flex m-b10">
                            <div class="label">地址：</div>
                            <div class="label">
                                {{ currentdDetail.address }}
                            </div>
                        </div>
                        <div class="flex m-b10">
                            <div class="label">联系电话：</div>
                            <div class="label">
                                {{ currentdDetail.contact }}
                            </div>
                        </div>

                        <div class="flex m-b10">
                            <div class="label">家庭成员：</div>
                            <div class="label">
                                <div
                                    class="m-b10"
                                    v-for="(
                                        item, index
                                    ) in currentdDetail.family"
                                    :key="index"
                                >
                                    {{ item }}
                                </div>
                            </div>
                        </div>

                        <!-- <div class="flex m-b10">
                            <div class="label">标签：</div>
                            <div class="box">常住人口</div>
                            <div class="box">户籍人口</div>
                        </div> -->
                    </div>
                </div>

                <div class="box-bottom">
                    <div class="box-bottom-content">
                        <div>医疗机构就诊史</div>
                        <div style="color: #fff">
                            {{ currentdDetail.jiuzhen }}
                        </div>
                        <div>详情</div>
                    </div>

                    <div class="box-bottom-content">
                        <div class="p-27">核酸检测史</div>
                        <div style="color: #fff">
                            {{ currentdDetail.jiance }}
                        </div>
                        <div>详情</div>
                    </div>

                    <div class="box-bottom-content">
                        <div class="p-27">预防接种史</div>
                        <div style="color: #fff">
                            {{ currentdDetail.jiezhong }}
                        </div>
                        <div>详情</div>
                    </div>

                    <div class="box-bottom-content">
                        <div class="p-27">行动轨迹史</div>
                        <div style="color: #fff">
                            {{ currentdDetail.guiji }}
                        </div>
                        <div>详情</div>
                    </div>

                    <div class="box-bottom-content">
                        <div class="p-27">信息覆盖史</div>
                        <div style="color: #fff">
                            {{ currentdDetail.fugai }}
                        </div>
                        <div>详情</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2 中间 -->
        <!-- <div class="middle" v-show="compnyType" @click.stop="() => {}">
            <div class="middle-top hidden flexcb m-b20">
                <div class="middle-top-title flexrb w-text">
                    <div class="fontsize16 pointer">选择行业分类</div>
                    <div class="fontsize12 pointer" @click="closeOnshow">
                        关闭 X
                    </div>
                </div>
                <div class="middle-top-content fx1 hidden">
                    <div
                        :class="[
                            'content-item',
                            'pointer',
                            'hidden',
                            item.cols == 2 ? 'across-col2' : '',
                            item.dictValue == enterprise.queryForm.industry_type
                                ? 'active_type'
                                : '',
                        ]"
                        v-for="(item, index) in company_type"
                        :key="index"
                        @click.stop="getData(item.dictLabel, item.dictValue)"
                    >
                        {{ item.dictLabel }}
                    </div>
                </div>
            </div>
        </div> -->

        <!-- 3 右侧 -->
        <div class="right flexcbh position-re pro-bgcolor544 p-20">
            <pro-title label="重点人员"></pro-title>
            <!-- v-loading="loading2" -->
            <div
                class="right-content fx1 flexcsh"
                element-loading-background="rgba(0, 0, 0, 0.3)"
            >
                <div class="search_box s_box m-b10">
                    <el-input
                        v-model="epi.queryForm2.company_name"
                        placeholder="请输入内容"
                    ></el-input>
                    <div class="search_btn flexrcc" @click="searchCompany2">
                        <span class="txt">搜 索</span>
                    </div>
                    <div class="reset_btn flexrcc" @click="searchCompany2(2)">
                        <span class="txt">重 置</span>
                    </div>
                </div>
                <div class="grade_box m-b10">
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 1 ? 'active' : ''"
                        @click="searchCompany2(1)"
                    >
                        <span class="txt">全部</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 2 ? 'active' : ''"
                        @click="searchCompany2(2)"
                    >
                        <span class="txt">阳性人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 3 ? 'active' : ''"
                        @click="searchCompany2(3)"
                    >
                        <span class="txt">密接人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 4 ? 'active' : ''"
                        @click="searchCompany2(4)"
                    >
                        <span class="txt">三出人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 5 ? 'active' : ''"
                        @click="searchCompany2(5)"
                    >
                        <span class="txt">七类人员</span>
                    </div>
                </div>

                <div class="fx1 hidden">
                    <StaticTable
                        :columns="epi.columns2"
                        :data-list="epi.data2"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(22, 159, 196, 0.25)"
                        @onClick="onClick"
                        @onRow="onRow"
                        headHeight="36"
                        rowHeight="40"
                    >
                        <template v-slot:col5="scope">
                            <div
                                style="color: #ff4f4f"
                                v-if="scope.row.col5 == 1"
                            >
                                阳性人员
                            </div>
                            <div
                                style="color: #ff9a3d"
                                v-else-if="scope.row.col5 == 2"
                            >
                                密接人员
                            </div>
                            <div
                                style="color: #f3ec43"
                                v-else-if="scope.row.col5 == 3"
                            >
                                三出人员
                            </div>
                            <div
                                style="color: #3cdcff"
                                v-else-if="scope.row.col5 == 4"
                            >
                                七类人员
                            </div>
                        </template>
                    </StaticTable>
                </div>
                <!-- 分页 -->
                <ProPage
                    :pages="epi.pages2"
                    :total="epi.total2"
                    ref="ref_page2"
                    @on_page="changePage($event, 28)"
                ></ProPage>
            </div>
        </div>
    </div>
</template>

<script>
import ProTitle from "@/components/Pro/ProTitle";
import ProTitle2 from "@/components/Pro/ProTitle2";
import StaticTable from "@/components/Common/StaticTable.vue";
import ProShade from "./ProShade";
import PieChart from "@/components/Chart/PieChart/PieChart.vue";
import LineChart from "@/components/Chart/LineChart/LineChart.vue";
import BarChart from "@/components/Chart/BarChart/BarChart.vue";
import ListDetail from "./ListDetail";
import DynamicTable from "@/components/Common/DynamicTable.vue";
import ProPage from "./ProPage";

import { my_option } from "@/utils/mock/proview/grid";
const tempData = [
    {
        title: 1,
        col2: "庞怡怡",
        col3: "17473467016",
        col4: "450521192307125863",
        col5: "1", //1阳性 2密接 3三处  4七类
    },
    {
        title: 2,
        col2: "斜仁荣",
        col3: "14784432872",
        col4: "450520200803131534",
        col5: "2", //1阳性 2密接 3三处  4七类
    },
    {
        title: 3,
        col2: "农林欣",
        col3: "17651612526",
        col4: "450520193401030981",
        col5: "3", //1阳性 2密接 3三处  4七类
    },
    {
        title: 4,
        col2: "尚云宁",
        col3: "15237516875",
        col4: "450521200104033384",
        col5: "4", //1阳性 2密接 3三处  4七类
    },
    {
        title: 5,
        col2: "班蓓山 ",
        col3: "13407574212",
        col4: "450525196401235130",
        col5: "4", //1阳性 2密接 3三处  4七类
    },
    {
        title: 6,
        col2: "田娜",
        col3: "17441514275",
        col4: "450527194204241113",
        col5: "4", //1阳性 2密接 3三处  4七类
    },
    {
        title: 7,
        col2: "酆裕洁",
        col3: "13562705460",
        col4: "450527193802131702",
        col5: "2", //1阳性 2密接 3三处  4七类
    },
    {
        title: 8,
        col2: "郎鹏建",
        col3: "17322313405",
        col4: "45052320191117034X",
        col5: "3", //1阳性 2密接 3三处  4七类
    },
    {
        title: 9,
        col2: "熊勇馨",
        col3: "16614174466",
        col4: "450526197608203575",
        col5: "4", //1阳性 2密接 3三处  4七类
    },
    {
        title: 10,
        col2: "姜佳玲",
        col3: "13781722148",
        col4: "450523195707065990",
        col5: "4", //1阳性 2密接 3三处  4七类
    },
];

const peopleDetaill = [
    {
        name: "庞怡怡",
        sex: "女",
        age: 48,
        address: "朝阳大道南7号",
        contact: 17473467016,
        family: ["庞利亚（姐妹） 1584585698"],
        jiuzhen: 3,
        jiance: 2,
        jiezhong: 3,
        guiji: 86,
        fugai: 32,
        markers: [
            {
                lng: 109.44232846669428,
                lat: 21.59444983792529,
                grade: 6,
            },
            {
                lng: 109.44787901712735,
                lat: 21.59199504966025,
                grade: 6,
            },
            {
                lng: 109.44925642636534,
                lat: 21.595868160644386,
                grade: 6,
            },
            {
                lng: 109.45161575182496,
                lat: 21.599959475106157,
                grade: 6,
            },
            {
                lng: 109.44746988597875,
                lat: 21.599904924408428,
                grade: 6,
            },
            {
                lng: 109.44397863033655,
                lat: 21.59919576304888,
                grade: 6,
            },
            {
                lng: 109.44564253227963,
                lat: 21.596604046652587,
                grade: 6,
            },
            {
                lng: 109.44606164570192,
                lat: 21.596119766867865,
                grade: 6,
            },
            {
                lng: 109.44688640287742,
                lat: 21.596600875027978,
                grade: 6,
            },
            {
                lng: 109.44917166865676,
                lat: 21.597666186860344,
                grade: 6,
            },
            {
                lng: 109.44790016810732,
                lat: 21.59936724896743,
                grade: 6,
            },
            {
                lng: 109.4455805375418,
                lat: 21.599178242066642,
                grade: 6,
            },
            {
                lng: 109.44533998288495,
                lat: 21.59867995093664,
                grade: 6,
            },
            {
                lng: 109.44499633386954,
                lat: 21.598130112627366,
                grade: 6,
            },
            {
                lng: 109.44235023841213,
                lat: 21.59699607122264,
                grade: 6,
            },
            {
                lng: 109.44456677346551,
                lat: 21.59429842743235,
                grade: 6,
            },
            {
                lng: 109.44391044150657,
                lat: 21.59551357973571,
                grade: 7,
            },
        ],
    },
    {
        name: "斜仁荣",
        sex: "男",
        age: 32,
        address: "广西北海市铁山港区南康镇陂塘村委会陂塘村二队13号",
        contact: 15278913245,
        family: [
            "刘小若（妻子） 1396654321",
            "斜德辉（儿子）",
            "斜云飞（父亲） 1886446315",
        ],
        jiuzhen: 2,
        jiance: 7,
        jiezhong: 3,
        guiji: 123,
        fugai: 321,
        markers: [
            {
                lng: 109.44721495049129,
                lat: 21.597928178770573,
                grade: 6,
            },
            {
                lng: 109.44651662054051,
                lat: 21.601274950459544,
                grade: 6,
            },
            {
                lng: 109.44410306318375,
                lat: 21.596135838128505,
                grade: 6,
            },
            {
                lng: 109.45381662054051,
                lat: 21.601274950459544,
                grade: 6,
            },
            {
                lng: 109.44410306318375,
                lat: 21.599135838128505,
                grade: 6,
            },
            {
                lng: 109.44571939453652,
                lat: 21.591184805932808,
                grade: 6,
            },
            {
                lng: 109.4486705863797,
                lat: 21.59438628679835,
                grade: 6,
            },
            {
                lng: 109.44753144852658,
                lat: 21.597048444070552,
                grade: 6,
            },
            {
                lng: 109.44890244629673,
                lat: 21.594330708317347,
                grade: 6,
            },
            {
                lng: 109.44849921165844,
                lat: 21.597227905387514,
                grade: 6,
            },
            {
                lng: 109.44690244629673,
                lat: 21.594330708317347,
                grade: 6,
            },
            {
                lng: 109.44649921165844,
                lat: 21.597227905387514,
                grade: 6,
            },
            {
                lng: 109.44720886081595,
                lat: 21.59697588373859,
                grade: 7,
            },
        ],
    },
    {
        name: "农林欣",
        sex: "男",
        age: 32,
        address: "广西北海市铁山港区南康镇陂塘村委会陂塘村二队13号",
        contact: 15278913245,
        family: [
            "刘小若（妻子） 1396654321",
            "斜德辉（儿子）",
            "斜云飞（父亲） 1886446315",
        ],
        jiuzhen: 2,
        jiance: 7,
        jiezhong: 3,
        guiji: 123,
        fugai: 321,
        markers: [
            {
                lng: 109.44232846669428,
                lat: 21.59444983792529,
                grade: 6,
            },
            {
                lng: 109.44787901712735,
                lat: 21.59199504966025,
                grade: 6,
            },
            {
                lng: 109.44925642636534,
                lat: 21.595868160644386,
                grade: 6,
            },
            {
                lng: 109.45161575182496,
                lat: 21.599959475106157,
                grade: 6,
            },
            {
                lng: 109.44746988597875,
                lat: 21.599904924408428,
                grade: 6,
            },
            {
                lng: 109.44397863033655,
                lat: 21.59919576304888,
                grade: 6,
            },
            {
                lng: 109.44564253227963,
                lat: 21.596604046652587,
                grade: 6,
            },
            {
                lng: 109.44606164570192,
                lat: 21.596119766867865,
                grade: 6,
            },
            {
                lng: 109.44688640287742,
                lat: 21.596600875027978,
                grade: 6,
            },
            {
                lng: 109.44917166865676,
                lat: 21.597666186860344,
                grade: 6,
            },
            {
                lng: 109.44790016810732,
                lat: 21.59936724896743,
                grade: 6,
            },
            {
                lng: 109.4455805375418,
                lat: 21.599178242066642,
                grade: 6,
            },
            {
                lng: 109.44533998288495,
                lat: 21.59867995093664,
                grade: 6,
            },
            {
                lng: 109.44499633386954,
                lat: 21.598130112627366,
                grade: 6,
            },
            {
                lng: 109.44235023841213,
                lat: 21.59699607122264,
                grade: 6,
            },
            {
                lng: 109.44456677346551,
                lat: 21.59429842743235,
                grade: 6,
            },
            {
                lng: 109.44795171470979,
                lat: 21.594349975188422,
                grade: 7,
            },
        ],
    },
];

import {
    getCompany,
    listCompanyWork,
    listWork,
    detailWork,
    statisticalWork,
} from "@/api/proview.js";

export default {
    name: "NavPerson",
    components: {
        ProTitle,
        ProTitle2,
        DynamicTable,
        StaticTable,
        ProShade,
        PieChart,
        LineChart,
        BarChart,
        ListDetail,
        ProPage,
    },
    props: {
        company_type: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            loading_company: false,
            compnyType: false,
            more: "全部行业", // 行业分类 (当前名称)
            //企业信息-------------------------------

            // 地图点的集合
            MarkerData: [],
            currentdDetail: null,
            // 右侧--------------------------------
            epi: {
                table_date: null,
                open_detail: false,
                detail_title: "企业信息",
                pages: 1,

                data: [],
                columns1: my_option.columns1,
                cut_companyid: "",
                queryForm: {
                    sort_by: false, // asc (true) 正序  desc(false) 倒序
                    company_name: "",
                },

                data2: tempData,
                columns2: [
                    {
                        label: "序号",
                        prop: "title",
                        width: "60",
                    },
                    {
                        label: "姓名",
                        prop: "col2",
                    },
                    {
                        label: "联系电话",
                        prop: "col3",
                    },
                    {
                        label: "证件号码",
                        prop: "col4",
                    },
                    {
                        label: "人员类型",
                        prop: "col5",
                        isSlot: true,
                    },
                ],
                queryForm2: {
                    current: 1,
                    gridName: "",
                    level: 1,
                    size: 10,
                    sortList: [
                        {
                            asc: false,
                            column: "",
                        },
                    ],
                },
                total2: 10,
                pages2: 1,

                queryForm3: {
                    company_id: "",
                    pageSize: 13,
                    current: 1,
                },
            },
        };
    },
    computed: {
        // 0 计算是否 跨列
        getAcrossCol() {
            return (p) => {
                if (p == 3) return "across-col3";
                else if (p == 2) return "across-col2";
                else return "";
            };
        },
        // 全局点击
        isHandleGlobal() {
            return this.$store.state.handle_num;
        },
    },

    watch: {
        // 全局点击
        isHandleGlobal(n, o) {
            this.closeOnshow();
        },
    },

    created() {
        // this.getData();
        // this.statisticalWork();
        this.currentdDetail = peopleDetaill[0];
        this.$emit("init", (parent) => {
            parent.MarkerData = this.currentdDetail.markers;
        });
    },
    mounted() {},
    methods: {
        /** 关闭地图的消息弹窗(给父组件调用) */
        closeMap(id) {
            this.MarkerData.forEach((item) => {
                if (id == this.enterprise.cut_companyid) {
                    // 点击x号 关闭 当前消息窗口
                    item.grade = 28;
                } else {
                    // 点击另外的地图标点, 关闭旧窗口, 打开新窗口时, 保留新窗口的icon高亮
                    if (item.id != this.enterprise.cut_companyid) {
                        item.grade = 28;
                    }
                }
            });
        },
        /** 点击地图弹窗详情(给父组件调用) */
        detailMap(id) {
            this.enterprise.open_detail = true;
            this.open_detail = false;
            // this.enterprise.cut_companyid = id;
        },
        onRow(row) {
            console.log(row);
            let target = peopleDetaill.find((item) => item.name === row.col2);
            if (!target) {
                target = peopleDetaill.find(
                    (item) => item.name !== this.currentdDetail.name
                );
            }
            this.currentdDetail = target;
            this.$emit("marker", this.currentdDetail.markers);
        },
        /** 点击企业列表 的某列 */
        onClick(row, col) {
            debugger;
            if (col.prop == "title") {
                this.enterprise.open_detail = true;
                this.enterprise.detail_title = row.title;
                // this.getCompany(row.id);
                this.enterprise.cut_companyid = row.id;
                this.enterprise.open_detail = true;
                this.open_detail = false;
            } else if (col.prop == "col3") {
                this.getIntroduction(row.id, true);
            } else if (col.prop == "col4") {
                this.enterprise.open_detail = false;
                this.open_detail = true;
                this.detail_title = row.title;
                this.enterprise.queryForm2.company_id = row.id;
                this.enterprise.queryForm2.pageNum = 1;
                if (this.$refs["ref_special"])
                    this.$refs["ref_special"].resetPage();
                this.listWork();
            }
            // this.$emit("onClick", row, col);
        },
        //
        onClickDetail(row, col) {
            this.detail2_title = row.col3;
            if (col.prop == "col7") {
                this.open_detail2 = true;
                this.detailWork(row.id);
            }
        },
        /** 点击table 头部某列 */
        onHeadCol(col) {
            if (col.prop == "col2") {
                this.enterprise.queryForm.sort_by =
                    !this.enterprise.queryForm.sort_by;
                this.getData(this.more);
                return;
            }
        },
        /** 关闭列表明细 */
        onCloseInfo() {
            this.open_detail = false;
        },
        /** 关闭详情 */
        onCloseDetail() {
            this.open_detail2 = false;
        },
        /** 重置弹窗数据 */
        reset() {
            this.enterprise.open_detail = false;
            this.$refs["ref_detail"].reset();
        },
        /** 分页切换 */
        changePage(num, type) {
            if (type == 28) {
                this.enterprise.queryForm2.pageNum = num;
                this.listWork();
            }
        },
        // 显示行业分类
        onShow() {
            this.compnyType = true;
        },
        closeOnshow() {
            this.compnyType = false;
        },
        // 搜索
        searchCompany(type = 1) {
            // this.enterprise.queryForm2.pageNum = 1;
            // if(this.$refs['ref_special']) this.$refs['ref_special'].resetPage()
            if (type == 2) {
                this.enterprise.queryForm.company_name = "";
            }
            this.getData(this.more, this.enterprise.queryForm.industry_type);
        },

        /** 特殊作业列表 */
        listWork() {
            listWork(this.enterprise.queryForm2).then((res) => {
                if (res.code == 0) {
                    this.enterprise.pages = res.data.pages;
                    this.list_info = res.data.data.map((item) => {
                        return {
                            id: item.id,
                            title: item.work_start_time,
                            col2: item.work_end_time,
                            col3: item.work_name,
                            col4: item.type,
                            col5: item.header,
                            col6: item.result,
                            col7: "详情",
                        };
                    });
                }
            });
        },
        /** 特殊作业详情 */
        detailWork(id) {
            detailWork({ work_id: id }).then((res) => {
                if (res.code == 0) {
                    let data = res.data;
                    let temp = {
                        left: [
                            {
                                label: "特殊作业名称",
                                value: data.work_name,
                            },
                            {
                                label: "类型",
                                value: data.type,
                                is_type: false,
                            },
                            {
                                label: "操作人",
                                value: data.work_user_name,
                                is_list: false,
                            },
                            {
                                label: "操作时间",
                                value: data.work_start_time,
                            },
                            {
                                label: "现场负责人",
                                value: data.header,
                            },
                            {
                                label: "操作方案",
                                value: data.work_norms,
                            },
                            {
                                label: "作业结果",
                                value: data.result,
                                is_result: false,
                            },
                            {
                                label: "操作过程",
                                value: data.process,
                                is_card: true,
                            },
                        ],
                    };
                    this.detail2_info = temp;
                }
            });
        },

        /**近6个月 */
        statisticalWork() {
            statisticalWork().then((res) => {
                if (res.code == 0) {
                    this.series_pie = res.data.type_ratio;
                    this.pie_num = res.data.type_ratio.reduce(
                        (pre, item, index) => {
                            return pre + item.value;
                        },
                        0
                    );

                    this.option_bar.xAxis.data = res.data.recent_data.months;
                    this.series_bar = res.data.recent_data.works;
                }
            });
        },
        /** 企业列表 */
        getData(label = "全部行业", val = "") {
            this.loading_company = true;
            this.enterprise.queryForm.industry_type = val; // 行业分类(当前分类)
            this.more = label;
            let temp = {
                industry_type: val,
                sort_type: this.enterprise.queryForm.sort_type,
                sort_by: this.enterprise.queryForm.sort_by ? "asc" : "desc",
                company_name: this.enterprise.queryForm.company_name,
            };
            listCompanyWork(temp).then((res) => {
                if (res.code == 0) {
                    this.enterprise.data = res.data.company_list.map((item) => {
                        return {
                            id: item.id,
                            title: item.company_name,
                            col2: item.work_count || 0,
                            col3: "",
                            col4: "查看",
                        };
                    });
                    this.MarkerData = res.data.company_list.map((item) => {
                        return {
                            id: item.id,
                            lng: item.lng,
                            lat: item.lat,
                            content: {
                                name: item.company_name,
                            },
                            introduction: null,
                            grade: 28,
                        };
                    });
                    this.$emit("marker", this.MarkerData);
                } else {
                    this.enterprise.data = [];
                }
                this.loading_company = false;
            });
        },
        /** 点击地图标点emit=false  点击table弹出简介信息时emit=true */
        getIntroduction(id, emit = false) {
            // this.enterprise.cut_companyid = id;
            // getCompany(id).then((res) => {
            //     if (res.code == 0) {
            //         let data = res.data;
            //         this.enterprise.detail_title = data.company_name;
            //         let temp = [
            //             {
            //                 label: "名称",
            //                 value: data.company_name,
            //             },
            //             {
            //                 label: "行业类型",
            //                 value: this.getIndustry(data.industry_type),
            //                 is_industry: true,
            //             },
            //             {
            //                 label: "法定代表人",
            //                 value: data.legal_name,
            //             },
            //             {
            //                 label: "法人电话",
            //                 value: data.legal_phone,
            //                 is_tel: false,
            //             },
            //             {
            //                 label: "查看详情",
            //                 value: "",
            //                 is_detail: true,
            //                 is_video: false,
            //             },
            //         ];
            //         this.MarkerData.forEach((item) => {
            //             if (item.id == id) {
            //                 item.introduction = temp;
            //                 item.grade = 31;
            //                 if (emit) {
            //                     this.$emit("onClick", item); // 点击table某列 响应的事件
            //                 } else {
            //                     this.$emit("changeFlag", item); // 点击地图icon 响应的事件
            //                 }
            //             } else {
            //                 item.grade = 28;
            //             }
            //         });
            //     }
            // });
        },
        /** 点击地图覆盖物emit=false  点击table弹出简介信息时emit=true */
        getIntroduction2(obj, emit = false) {
            // this.map_dialog = true;
        },

        searchCompany2(level) {
            this.epi.queryForm2.level = level;
            if (level == 1) {
                this.epi.data2 = tempData;
            } else {
                this.epi.data2 = tempData.filter(
                    (item) => item.col5 == level - 1
                );
            }
        },
    },
};
</script>

<style lang="scss">
.el-image-viewer__wrapper {
    top: vh(100);
    bottom: vh(100);
    left: vh(200);
    right: vh(200);
}

.el-loading-spinner .circular .path {
    stroke: #2ef7fc !important;
}
</style>

<style lang="scss" scoped>
.container {
    ::v-deep .el-input__inner {
        color: white;
    }
    ::v-deep .el-input--medium .el-input__inner {
        background-color: #002440;
        border: 1px solid #094666;
    }

    // background-color: aqua;   // 其子元素脱离的标准流
    .left {
        position: absolute;
        z-index: 12;
        left: vw(30);
        top: vh(88);
        bottom: vh(40);
        width: vw(520);

        .left-content {
            width: vw(472);
            height: vw(570);
            border: 1px solid rgba(22, 159, 196, 0.25);
            // padding: vw(24);

            .dialog_content1 {
                align-items: flex-start;

                .item {
                    // width: vw(480);
                    padding: vh(24) 0 0 vh(24);

                    .label {
                        color: #fff;
                        margin-right: vw(10);
                    }
                    .value {
                        color: #2ef7fc;
                    }

                    .word {
                        color: #fff;
                        display: inline-block;
                    }

                    .box {
                        width: vw(72);
                        height: vw(24);
                        background: rgba(45, 255, 205, 0.16);
                        border: 1px solid rgba(45, 255, 205, 0.32);
                        border-radius: 2px;
                        color: #2dffcd;
                        font-size: vw(12);
                        text-align: center;
                        padding: vw(3) 0 0 0;
                        margin-left: vw(16);
                    }
                }
            }

            .box-bottom {
                border-top: 1px solid rgba(22, 159, 196, 0.25);

                .box-bottom-content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    padding: vw(20) vw(80) 0 vw(40);
                    color: #2ef7fc;
                    font-size: vw(14);
                }

                .p-27 {
                    padding-left: vw(27);
                }
            }
        }
    }
    .middle {
        position: absolute;
        z-index: 13;
        left: vw(528);
        top: vh(88);
        // bottom: vh(82);
        background: #002440;
        box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.6);
        padding: vh(5) vw(20) vh(20);
        .middle-top {
            width: vw(550);
            .middle-top-title {
                padding: vh(12) 0;
            }
            .middle-top-content {
                display: grid;
                grid-template-columns: [c1] 1fr [c1e c2] 1fr [c2e c3];
                gap: vh(5) vw(5);
                grid-auto-flow: row dense;
                // align-items: center;
                align-content: center;
                text-align: center;
                .content-item {
                    padding: vh(8) vw(5);
                    background: rgba(22, 159, 196, 0.08);
                    border: 1px solid rgba(22, 159, 196, 0.08);
                    border-radius: 2px;
                    font-size: vh(14);
                    color: #ffffff;
                    &.across-col2 {
                        // grid-row-start: r2;
                        // grid-row-end: r3;
                        grid-column-start: c1;
                        grid-column-end: c2e;
                    }
                    &.active_type {
                        background: #0e5570 !important;
                        border: 1px solid #169fc4 !important;
                    }
                }
            }
        }
    }

    .right {
        position: absolute;
        z-index: 12;
        right: vw(30);
        top: vh(88);
        bottom: vh(40);
        width: vw(640);
        .right-content {
            .grade_box {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                .sort_btn {
                    cursor: pointer;
                    padding: 0px 10px;
                    height: vh(32);
                    background: #002440; // 16171F
                    border: 1px solid rgba(22, 159, 196, 0.25);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                    &.active {
                        background: rgba(22, 159, 196, 0.2);
                        .txt {
                            color: #61ffff;
                        }
                    }
                }
            }
        }
    }

    .iconfont {
        margin-right: vw(5);
    }
}
</style>
